<template>
  <div class="container mx-auto px-4 pt-24 pb-16">
    <div class="mb-8">
      <h1 class="text-3xl font-bold mb-2">经典题库</h1>
      <p class="text-gray-600 dark:text-gray-300">精选经典海龟汤题目，挑战你的推理能力</p>
    </div>
    
    <!-- 标签筛选 -->
    <div class="flex flex-wrap gap-2 mb-6">
      <button 
        v-for="tag in tags" 
        :key="tag"
        class="px-4 py-1.5 rounded-full text-sm transition-all"
        :class="activeTag === tag ? 'bg-primary text-white' : 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'"
        @click="activeTag = tag"
      >
        {{ tag }}
      </button>
    </div>
    
    <!-- 题库列表 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div 
        v-for="soup in filteredSoups" 
        :key="soup.id"
        class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow-md hover:shadow-lg transition-all border border-gray-100 dark:border-gray-700"
      >
        <div class="flex justify-between items-start mb-3">
          <span class="px-2.5 py-0.5 text-xs rounded-full" :class="getDifficultyClass(soup.difficulty)">
            {{ soup.difficulty }}
          </span>
          <span class="text-sm text-gray-500 flex items-center">
            <i class="fa fa-eye mr-1"></i> {{ soup.views }}
          </span>
        </div>
        
        <h3 class="text-lg font-semibold mb-2">{{ soup.title }}</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm line-clamp-2 mb-4">{{ soup.description }}</p>
        
        <div class="flex justify-between items-center">
          <span class="text-xs text-gray-500">
            <i class="fa fa-clock-o mr-1"></i> 发布于 {{ soup.publishDate }}
          </span>
          <button 
            class="px-4 py-1.5 bg-primary/10 text-primary rounded-lg text-sm hover:bg-primary/20 transition-colors"
            @click="handleStartGame(soup.id)"
          >
            开始挑战
          </button>
        </div>
      </div>
    </div>
    
    <!-- 无数据提示 -->
    <div v-if="filteredSoups.length === 0" class="text-center py-12">
      <i class="fa fa-search text-4xl text-gray-300 dark:text-gray-600 mb-3"></i>
      <p class="text-gray-500">没有找到符合条件的题目</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 标签数据
const tags = ['全部', '热门', '最新', '简单', '中等', '困难'];
const activeTag = ref('全部');

// 模拟题库数据
const soups = ref([
  {
    id: 1,
    title: '沙漠中的高跟鞋',
    description: '一个女人穿着高跟鞋，在沙漠中死了，周围没有任何脚印。她是怎么死的？',
    difficulty: '中等',
    views: 3562,
    publishDate: '2023-01-15'
  },
  {
    id: 2,
    title: '雨中的男人',
    description: '一个人在雨中行走，没有带任何雨具，头发却一点没湿。为什么？',
    difficulty: '简单',
    views: 5231,
    publishDate: '2023-02-20'
  },
  {
    id: 3,
    title: '消失的指纹',
    description: '一个男人被发现死于密室中，现场没有留下任何指纹，只有一张写着"再见"的纸条。',
    difficulty: '困难',
    views: 1897,
    publishDate: '2023-03-05'
  },
  {
    id: 4,
    title: '午夜敲门声',
    description: '一个人住在山顶的小屋里，半夜听见敲门声，他打开门却没有人，于是去睡了。等了一会儿又有敲门声，去开门还是没人，如是者几次。第二天，有人在山脚下发现死尸一具，警察来把山顶的那人带走了。为什么？',
    difficulty: '中等',
    views: 4215,
    publishDate: '2023-04-12'
  },
  {
    id: 5,
    title: '水草',
    description: '有个男人跟他女友去河边散步，突然他的女友掉进河里了，那个男人就急忙跳到水里去找，可没找到他的女友，他伤心的离开了这里。过了几年后，他故地重游，这时看到有个老人在钓鱼，可那老人钓上来的鱼身上没有水草，他就问那老人为什么鱼身上没有沾到一点水草，那老人说：这河从没有长过水草。说到这时那男人突然跳到水里，自杀了。为什么？',
    difficulty: '中等',
    views: 6892,
    publishDate: '2023-05-28'
  },
  {
    id: 6,
    title: '葬礼的故事',
    description: '有母女三人，母亲死了，姐妹俩去参加葬礼，妹妹在葬礼上遇见了一个很型的男子，并对他一见倾心。但是葬礼后那个男子就不见了，妹妹怎么找也找不到他。后来过了一个月，妹妹把姐姐杀了，问为什么？',
    difficulty: '困难',
    views: 3257,
    publishDate: '2023-06-30'
  }
]);

// 根据标签筛选题库
const filteredSoups = computed(() => {
  if (activeTag.value === '全部') {
    return soups.value;
  }
  return soups.value.filter(soup => soup.difficulty === activeTag.value);
});

// 获取难度样式
const getDifficultyClass = (difficulty) => {
  const classes = {
    '简单': 'bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-400',
    '中等': 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-400',
    '困难': 'bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-400'
  };
  return classes[difficulty] || 'bg-gray-100 text-gray-700';
};

// 开始游戏
const handleStartGame = (id) => {
  router.push(`/classic-library/${id}`);
};
</script>